<template>
  <div class="app-container flex flex-col">
    <div class="mb-2 pl-4 flex items-center">
      <el-select v-model="selectValue" size="small" class="mr-2">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button size="small" style="height: 30px;" @click="copyLastGroups">
        copy last groups
      </el-button>
      <el-button size="small" class="flex justify-center items-center" style="height: 30px;" @click="copyUrl">
        copy url
      </el-button>
    </div>
    <div class="h-full date-line-page">
      <div class="chart-wrap h-full w-full" :class="`${chatClassName}`"></div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import { handlePastFormatter, getSeriesForPast } from '@/utils/study.js'
import ChartWatcherMixin from '@/mixins/ChartWatcherMixin.js'

export default {
  name: 'ArbitraryPast',
  mixins: [ChartWatcherMixin],
  data() {
    return {
      selectValue: 10,
      options: Array.from({ length: 24 }, (_, i) => ({
        value: i + 1,
        label: String(i + 1)
      })),
      chartOption: {
        grid: {
          show: true,
          // bottom: 20,
          // bottom: 70,
          // bottom: 80,

          // top: 8,
          // bottom: 20,
          // bottom: 70,
          // bottom: 80,
          borderWidth: 0, // 确保没有边框

          top: 8,
          bottom: 120,
          // left: 25,
          left: 50,
          right: 0
        },
        tooltip: {
          trigger: 'axis', // 轴触发
          formatter: (params) => handlePastFormatter.call(this, params)
        },
        dataZoom: [
          {
            // startValue: '2024-01-18',
            // endValue: '2024-10-15',
            bottom: 10,
            right: 5,
            left: 5
          }
        ],
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            // interval: 0, // 使x轴文字显示全
            interval: 'auto', // 自动调整间隔
            rotate: 60
          }
          // splitLine: {
          //   // 网格样式
          //   show: true,
          //   lineStyle: {
          //     color: '#f0f0f0',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
        },
        yAxis: {
          type: 'value',
          // interval: 1, // 步长
          // min: 1, // 起始
          // max: 49, // 终止
          splitLine: {
            // 网格样式
            show: true,
            lineStyle: {
              // color: [...ccc24, 'red', ...ccc24],
              color: '#f0f0f0',
              width: 1,
              type: 'solid'
            }
            // show: false
          }
        },
        // visualMap: {
        //   top: 50,
        //   right: 10,
        //   pieces: [
        //     {
        //       gt: 0,
        //       lte: 25,
        //       color: "#93CE07",
        //     },
        //     {
        //       gt: 25,
        //       lte: 50,
        //       color: "#FBDB0F",
        //     },
        //     // {
        //     // 	gt: 100,
        //     // 	lte: 150,
        //     // 	color: '#FC7D02'
        //     // },
        //     // {
        //     // 	gt: 150,
        //     // 	lte: 200,
        //     // 	color: '#FD0100'
        //     // },
        //     // {
        //     // 	gt: 200,
        //     // 	lte: 300,
        //     // 	color: '#AA069F'
        //     // },
        //     // {
        //     // 	gt: 300,
        //     // 	color: '#AC3B2A'
        //     // }
        //   ],
        //   outOfRange: {
        //     color: "#999",
        //   },
        // },
        series: [
          {
            data: [],
            type: 'line',
            lineStyle: {
              // color: lineColor, // 默认颜色
              width: 1 // 默认线宽
            },
            emphasis: {
              lineStyle: {
                // color: lineColor, // 悬停时的颜色
                width: 1 // 悬停时的线宽
              }
              // itemStyle: {
              //   color: "#ff7f50", // 悬停时数据点的颜色
              //   borderColor: "#ff7f50", // 数据点边框颜色
              //   borderWidth: 2, // 数据点边框宽度
              // },
            }
          }
        ]
      }
    }
  },
  watch: {
    selectValue: {
      handler() {
        this.updateChart()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 复制最后this.selectValue个数据
    copyLastGroups() {
      const lastValues = this.allValues.slice(-this.selectValue - 1).map(item => item.number)
      navigator.clipboard.writeText(JSON.stringify(lastValues))
    },

    updateChart() {
      if (this.myChart) {
        const values = this.allValues
        this.chartOption.xAxis.data = values.map((e) => e.time)

        // const n = _.floor(this.allValues.length / 4)
        const n = _.floor(this.allValues.length / 16)
        const startItem = _.nth(this.allValues, -n)
        const endItem = _.last(this.allValues)
        const startValue = startItem.time
        const endValue = endItem.time

        this.chartOption.dataZoom[0].startValue = startValue
        this.chartOption.dataZoom[0].endValue = endValue
        this.chartOption.series[0].data = getSeriesForPast(this.allValues, this.selectValue)
        // 绘制图表
        this.myChart.setOption(this.chartOption)
      }
    }
  }
}
</script>
